<template>
	<pageViewContainer>
		<template #headerTool>
			<el-button type="success" icon="FolderAdd" @click="editClick(null)">新增</el-button>
		</template>
		<el-row :gutter="12" style="height: 100%;">
			<el-col :span="8">
				<div style="position: relative;height: 100%;">
					<el-table ref="table" height="100%" @row-click="rowClick" :expand-row-keys="expandRowKeys"
						:row-class-name="tableRowClassName" :data="cateTreeList" :border="false" row-key="id"
						class="flex1 table1 border" v-loading="cateLoading">
						<el-table-column prop="name" label="名称" />
						<el-table-column prop="action" label=" " align="right" width="100">
							<template #default="scope">
								<el-button link type="danger" icon="EditPen" size="small"
									@click="editClick(scope.row)"></el-button>
								<el-divider direction="vertical" />
								<el-popconfirm class="box-item" title="删除后不可恢复,确认删除吗?" placement="bottom"
									@confirm="delCate(scope.row)">
									<template #reference>
										<el-button link type="danger" icon="Delete" size="small"
											:loading="delCateLoading[`_${scope.row.id}`]"></el-button>
									</template>
								</el-popconfirm>
							</template>
						</el-table-column>
					</el-table>
					<div class="noneData column" v-if="cateTreeList.length == 0">
						<el-empty description="暂无数据" />
					</div>
				</div>
			</el-col>
			<el-col :span="16">
				<div class="border" style="height: 100%;">
					<dataListTem ref="dataListTem" @dataItemEdit="editClick"></dataListTem>
				</div>
			</el-col>
		</el-row>
		<editTem ref="editTem" @editSuccess="editSuccess"></editTem>
	</pageViewContainer>
</template>

<script>
import {
	ElMessage
} from 'element-plus'
import dataListTem from './components/dataList.vue'
import editTem from './components/edit.vue'
import {
	useDataDictionaryStore
} from '../../../stores/dataDictionary'
export default {
	components: {
		dataListTem,
		editTem
	},
	data() {
		return {
			cateLoading: true,
			cateTreeList: [],

			searchOption: [{
				componentsName: 'el-input',
				label: "名称",
				value: '',
				key: 'name'
			}],
			expandRowKeys: [],
			currentRowId: null,
			currentRow: {},
			delCateLoading: {}
		}
	},
	computed: {
		dataDictionaryStore() {
			return useDataDictionaryStore()
		}
	},
	created() {
		this.getCateTreeList()
	},
	methods: {
		editSuccess(itemInfo) {
			if (itemInfo.is_cate) {
				this.getCateTreeList()
			} else {
				this.$refs.dataListTem.getCateInnerDataList()
			}
		},
		getCateTreeList() {
			this.cateLoading = true
			this.dataDictionaryStore.getCateTreeList().then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				this.cateTreeList = res.data.treeList
			}).catch(err => {
				ElMessage.error('类目获取失败,' + err.message)
			}).finally(() => {
				this.cateLoading = false
			})
		},

		tableRowClassName({
			row,
			index
		}) {
			if (this.currentRowId == row.id) {
				return 'highlightRow'
			}
			return ''
		},
		search() {

		},
		editClick(itemInfo = null) {
			if (itemInfo) {
				this.$refs.editTem.itemInfo = JSON.parse(JSON.stringify(itemInfo))
			}
			this.$refs.editTem._cateList = this.cateTreeList
			this.$refs.editTem.cateInfo = this.currentRow
			this.$refs.editTem.show = true
		},
		rowClick(row, column) {
			this.currentRowId = row.id; //高亮 展示数据项目
			this.currentRow = row; //高亮 展示数据项目
			//展示数据
			this.$refs.dataListTem.cateId = row.id
			this.$refs.dataListTem.cateName = this.currentRow.name
			this.$refs.dataListTem.getCateInnerDataList()
			//展开 折叠
			if (row.children && Array.isArray(row.children)) {
				let this_id = String(row.id)
				let _expandRowKeys = JSON.parse(JSON.stringify(this.expandRowKeys))
				if (_expandRowKeys.includes(this_id)) {
					_expandRowKeys.splice(_expandRowKeys.indexOf(this_id), 1)
				} else {
					_expandRowKeys.push(this_id)
				}
				this.expandRowKeys = _expandRowKeys
			}
		},
		delCate(row) {
			this.delCateLoading[`_${row.id}`] = true
			this.dataDictionaryStore.delete(row.id).then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				ElMessage.success(res.message)
				this.getCateInnerDataList()
			}).catch(err => {
				ElMessage.error(err.message)
			}).finally(() => {
				this.delCateLoading[`_${row.id}`] = false
			})
		}
	}
}
</script>

<style scoped lang="less">
.table1 {
	border-bottom: 0;
}

.border {
	border: 1px solid var(--el-border-color-light);
}

:deep(.highlightRow) {
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16) !important;
	position: relative;
	background-color: var(--el-table-current-row-bg-color);
	transition: all .25s ease;
}

.noneData {
	background-color: var(--el-fill-color-blank);
	position: absolute;
	left: 1px;
	right: 1px;
	top: 1px;
	bottom: 1px;
	z-index: 5;
}
</style>